<template>
	<view class="load-more">
		<block v-if="noData">
			<view class="load-nodata-wpap" @tap="tapLoadEmitd"></view>
			<view class="load-nodata">
				<view class="sg-nodata">
					<image class="img" :src="noDataimg" mode="aspectFit"></image>
				</view>
				<text class="nodata-text">网络不给力，点击屏幕重试</text>
			</view>
		</block>
		<block v-else>
			<view class="sg-loadding-wrap" v-if="loadEnd === false"><van-loading /></view>
			<view class="load-end" v-if="loadEnd === true">
				<text>{{ loadEndText }}</text>
			</view>
		</block>
	</view>
</template>

<script>
import noDataimg from './../static/noData2.png'
export default {
	props: {
		loadEnd: {
			type: Boolean,
			default: false
		},
		loadText: {
			type: String,
			default: '加载中'
		},
		loadEndText: {
			type: String,
			default: '没有更多数据'
		},
		noData: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			noDataimg: noDataimg
		}
	},
	methods: {
		tapLoadEmitd() {
			this.$emit('LoadEmitd');
		}
	}
};
</script>

<style scoped lang="scss">
.load-more {
	display: flex;
	padding: 20upx;
	justify-content: center;
	align-items: center;
}
.sg-loadding-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 28upx;
	color: #777777;
}
.sg-loadding-wrap text {
	margin: 0 10upx;
}
.load-nodata-wpap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.load-nodata {
	width: 100%;
	margin: auto;
	text-align: center;
	.sg-nodata {
		margin: auto;
		width: 150upx;
		height: 150upx;
		.img {
			width: 100%;
			height: 100%;
		}
	}
	.nodata-text {
		margin-top: 20upx;
		font-size: 34upx;
		text-align: center;
		color: #d3d3d3;
	}
}

.load-end {
	text-align: center;
	font-size: 28upx;
	color: #777777;
}
</style>
